{% extends 'base.html' %}
{% block title %}四Y-可视化
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="/static/css/echarts_visual.css">
{% endblock %}
{% block headjs %}
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
{% endblock %}
{% block content-center %}
    <div class="visual_content_text">
        <h1 style="color: white">Some Data Visualization Charts About COVID-19.</h1>
        <p style="color: white">Summary of epidemic situation statistics in various regions in China
            7: 00-10:00 is the update peak. Please forgive us if the data lags behind.</p>
    </div>
{% endblock %}
{% block body %}
    {% if sign == 'china' %}
        <div class="pyecharts_visual">
            <a id="city_a" href="" style="display: none"></a>
            <div class="line_visual" style="display: inline-block">
                {{ line|safe }}
            </div>
            <div class="bar_visual" style="display: inline-block;">
                {{ bar|safe }}
            </div>
            <div class="map_visual" style="display: inline-block;">
                {{ map|safe }}
            </div>
            <div id="hdemo" style="height:260px;overflow:hidden;" class="location">
                <div id="indemo" style="height:100%;">
                    <div id="hdemo1">
                        <ul>
                            {% for dangerours in DangerousAreaList %}
                                <li><span
                                        class="dangerours_level">{{ dangerours.level }}:&nbsp</span>&nbsp{{ dangerours.dangerousArea }}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div id="hdemo2"></div>
                </div>
            </div>
            <div class="integrated_data">
                <div class="data_one"><p>新增本土</p>
                    <p>{{ integrated_data.0.add_local }}</p></div>
                <div class="data_one"><p>新增本土无症状</p>
                    <p>{{ integrated_data.0.add_local_none }}</p></div>
                <div class="data_one"><p>新增境外</p>
                    <p>{{ integrated_data.0.add_overseas }}</p></div>
                <div class="data_one"><p>港澳台新增</p>
                    <p>{{ integrated_data.0.add_GOT }}</p></div>
                <div class="data_one"><p>现有本土</p>
                    <p>{{ integrated_data.0.localing }}</p></div>
                <div class="data_one"><p>现有本土无症状</p>
                    <p>{{ integrated_data.0.localing_none }}</p></div>
                <div class="data_one"><p>现有境外</p>
                    <p>{{ integrated_data.0.overseas_ing }}</p></div>
                <div class="data_one"><p>现有重症</p>
                    <p>{{ integrated_data.0.critical }}</p></div>
                <div id="div_line"></div>
                <div class="data_one"><p>累计确诊</p>
                    <p style="color: red">{{ integrated_data.0.confirmed }}</p>
                    <p class="yesterday" style="font-size: 12px;display: inline-block">较昨日</p>
                    <span style="color: red">{{ integrated_data.0.confirmed_yesterday }}</span></div>
                <div class="data_one"><p>累计境外</p>
                    <p style="color: blue">{{ integrated_data.0.add_up_overseas }}</p>
                    <p class="yesterday" style="font-size: 12px;display: inline-block">较昨日</p>
                    <span style="color: blue">{{ integrated_data.0.add_up_overseas_yesterday }}</span></div>
                <div class="data_one"><p>累计治愈</p>
                    <p style="color: green">{{ integrated_data.0.add_up_cured }}</p>
                    <p class="yesterday" style="font-size: 12px;display: inline-block">较昨日</p>
                    <span style="color: green">{{ integrated_data.0.add_up_cured_yesterday }}</span></div>
                <div class="data_one"><p>累计死亡</p>
                    <p style="color: #343a40">{{ integrated_data.0.add_up_died }}</p>
                    <p class="yesterday" style="font-size: 12px;display: inline-block">较昨日</p>
                    <span style="color: #343a40">{{ integrated_data.0.add_up_died_yesterday }}</span></div>

            </div>
        </div>
    {% elif sign == 'city' %}
        <div class="pyecharts_visual_city">
            <div class="visual_other_text">
                <div class="return_china_map">
                    <button type="button"><a href="/visual/">返回疫情首页</a></button>
                </div>
                <h2>{{ area }}省疫情详情</h2>
                <ul>
                    <li>累计确诊 <p style="color: red">{{ CityData.0.confirmed }}</p></li>
                    <li>现有确诊 <p style="color: darkred">{{ CityData.0.curConfirm }}</p></li>
                    <li>新增确诊 <p style="color: orangered">{{ CityData.0.confirmedRelative }}</p></li>
                </ul>
            </div>
            <div class="line_visual_city" style="display: inline-block">
                {{ CityLine|safe }}
            </div>
            <div class="bar_visual_city" style="display: inline-block;">
                {{ CityBar|safe }}
            </div>
            <div class="map_visual_city" style="display: inline-block;">
                {{ CityMap|safe }}

            </div>
            <div class="pie_visual_city">
                {{ CityPie|safe }}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block footjs %}
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script>
        var flat_one = true;
        {% if sign == 'city' %}
            window.addEventListener("mouseover", function () {
                if (flat_one === true) {
                    window.scrollBy(0, 2000);
                    flat_one = false;
                }
            })

        {% endif %}
    </script>
    <script>
        var myChart = echarts.init(document.getElementById('chart_111'));
        var map_id = $('.chart-container').attr('id');
        myChart.on('click', function (params) {
            var city = document.getElementById('city_a');
            city.href = '/visual/?area=' + params.name;
            {#alert(city.href);#}
            city.click();
            {#alert(params.name);#}
            {#$.ajax({#}
            {#    url: '/visual/',#}
            {#    type: "POST",#}
            {#    dataType: 'JSON',#}
            {#    traditional: true,#}
            {#async:false,#}
            {#    data: {'city': params.name},#}
            {#    success: function (result) {#}
            {#    },#}


        })
    </script>
    <script>
        speed = 10; //数字越大滚得越慢
        var htab = document.getElementById("hdemo");
        var htab1 = document.getElementById("hdemo1");
        var htab2 = document.getElementById("hdemo2");
        htab2.innerHTML = htab1.innerHTML;
        htab.scrollTop = htab1.offsetHeight;

        function Marquee() {
            if (htab.scrollTop >= htab1.offsetHeight) {
                htab.scrollTop -= htab2.offsetHeight;
            } else {
                htab.scrollTop += 1;
            }
        }

        var MyMar = setInterval(Marquee, speed);
    </script>
{% endblock %}